<template>
  <div class="login">
    <div class="title">
      <div class="left">
        <img src="@/assets/login/logo.png" alt="" />
        <div class="tit-text">做一流的专业安全健康技术服务提供者</div>
      </div>
      <div class="right">
        <span>江苏中安首页</span>
        <span>帮助与支持</span>
      </div>
    </div>
    <!-- <wxlogin
      class="impowerBox"
      appid="wx9947bbc32e2fda19"
      :scope="'snsapi_login'"
      :theme="'white'"
      :href="style"
      :redirect_uri="'http://xierongxian.vicp.net/v3/ucenter/wx/callback'"
      rel="external nofollow"
    ></wxlogin> -->
    <div class="login-main">
      <div class="tit">
        <p class="title2">{{ txt }}</p>
      </div>
      <div class="bottom">
        <div v-if="!login" class="login_">
          <div v-if="!sign">
            <el-form :rules="rules" :model="loginForm" ref="form" class="form">
              <el-form-item prop="account">
                <el-input
                  v-model="loginForm.account"
                  style="margin-bottom: 28px"
                  placeholder="请输入手机号或账号"
                  label="丨少时诵诗书所所所所所所所"
                  @change="phoneChange"
                  clearable
                >
                  <i slot="prefix" class="el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  type="password"
                  v-model="loginForm.password"
                  clearable
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
            </el-form>

            <!-- <div class="tip">
              <div class="tip1">忘记密码?</div>
              <div class="tip2" @click="loginType('sjzc')">免费注册</div>
            </div> -->
            <el-button
              class="login-btn"
              :loading="loading"
              @click="loginHome(1)"
            >
              登 录
            </el-button>
            <!-- <div class="thirdLogin">
              <div @click="loginType('wx')">
                <img
                  width="24px"
                  height="24px"
                  src="@/assets/weixin.png"
                  alt=""
                />
                <span>微信登录</span>
              </div>
              <div>
                <img width="24px" height="24px" src="@/assets/QQ.png" alt="" />
                <span>QQ登录</span>
              </div>
            </div> -->
          </div>
          <wxlogin
            v-if="sign == 'wx'"
            class="impowerBox"
            appid="wx9947bbc32e2fda19"
            :scope="'snsapi_login'"
            :theme="'black'"
            :href="style1"
            :redirect_uri="'http://xierongxian.vicp.net/v3/ucenter/wx/callback'"
            rel="external nofollow"
          ></wxlogin>
        </div>
        <div v-else class="zc">
          <!-- <div class="tit" v-if="sign == 'sj'">
            <i v-if="sign" @click=";(login = 0), (sign = '')" class="el-icon-back back">
              &nbsp;返回
            </i>
            <div class="title2">手机登录</div>
          </div> -->
          <el-input
            v-model="zcInfo.mobilePhone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-mobile-phone"
            @blur="regTest"
            clearable
          ></el-input>
          <div class="phoneTest">{{ phoneTest }}</div>
          <div style="position: relative" v-if="sign == 'sjzc'">
            <el-input
              class="inp1"
              v-model="zcInfo.code"
              placeholder="请输入验证码"
              prefix-icon="el-icon-key"
              clearable
            ></el-input>
            <el-button
              type="primary"
              class="getCode"
              @click="getCode"
              v-if="yzm < 0"
            >
              获取验证码
            </el-button>
            <span v-else class="getCode" :class="{ djs: yzm > 0 }"
              >{{ yzm }}秒后重新发送</span
            >
          </div>
          <el-input
            class="inp2"
            v-model="zcInfo.password"
            type="password"
            placeholder="请输入密码 "
            prefix-icon="el-icon-lock"
            clearable
          ></el-input>
          <el-button
            type="primary"
            class="login-btn"
            v-if="sign == 'sjzc'"
            @click="phoneRegister"
          >
            立即注册
          </el-button>
          <!-- <el-button
            type="primary"
            class="login-btn"
            style="margin-top: 18px"
            @click="loginHome"
            v-if="sign == 'sj'"
          >
            登 录
          </el-button> -->
          <p v-if="sign == 'sjzc'">
            已有账号?&nbsp;&nbsp;&nbsp;
            <span @click="goBack">返回登录</span>
          </p>
        </div>
      </div>
    </div>
    <div class="jszc">技术支持：© 南京翔殷科技有限公司</div>
    <div class="jszc contactInformation">
      版权所有:江苏中安科技服务有限公司   苏ICP备2021025366号-2
    </div>
  </div>
</template>
<script>
// import request from '@/utils/request'
import wxlogin from "vue-wxlogin";
import { phoneCode, phoneRegister } from "@/api/user";
export default {
  name: "indexLogin",
  components: { wxlogin },
  data() {
    return {
      zhanghao: "",
      phoneTest: "",
      loginForm: {
        account: "",
        password: "",
      },
      haha: "1",
      zcInfo: {
        mobilePhone: "",
        password: "",
        code: "",
      },
      rules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: "请输入账号",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
          { min: 5, max: 20, message: "长度在6-20之间", trigger: "blur" },
        ],
      },
      loading: false,
      sign: 0,
      txt: "管理员登录",
      yzm: -1,
      style1:
        "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30g",
      login: 0,
      style:
        "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IA==",
    };
  },
  mounted() {
    // this.loginHome();
    window.addEventListener("keydown", this.keyEvent, true);
  },
  methods: {
    keyEvent(e) {
      if (this.loading == true) return;
      e.keyCode == 13 && this.loginHome(1);
    },
    regTest() {
      if (!this.zcInfo.mobilePhone) return (this.phoneTest = "手机号不能为空");
      this.phoneTest = "";
    },
    async phoneRegister() {
      let data = {
        mobilePhone: this.zcInfo.mobilePhone,
        password: this.zcInfo.password,
      };
      try {
        await phoneRegister(data, this.zcInfo.code);
        this.$message({
          type: "success",
          message: "恭喜您注册成功！",
          duration: 1500,
          onClose: () => this.goBack(),
        });
      } finally {
        //
      }
    },
    phoneChange(val) {
      !val && (this.loginForm.password = "");
    },
    async getCode() {
      this.regTest();
      if (this.phoneTest) return;
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.zcInfo.mobilePhone))
        return this.$notify({
          title: "友情提示",
          message: "手机号格式不正确！",
          offset: 100,
          type: "error",
        });
      try {
        await phoneCode(this.zcInfo.mobilePhone);
        this.yzm = 60;
        let timer = setInterval(() => {
          this.yzm--;
          if (this.yzm == 0) (this.yzm = -1), clearInterval(timer);
        }, 1000);
      } finally {
        //
      }
    },
    loginHome(val) {
      let c = window.location.href.includes("token");
      if (c) return this.$router.push("/home");
      let _that = this;
      val == 1 &&
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            try {
              this.loading = true;
              // if (!isNaN(this.loginForm.account)) {
              //   this.loading = false
              //   return this.$message.error('无效的账号')
              // }
              await this.$store.dispatch("user/login", this.loginForm);
              
              this.$router.push({
                path: "/home",
              });
              // localStorage.getItem("userToken") &&
              //   ((this.loading = false), this.$router.push("/home"));
            } finally {
              this.loading = false;
            }
          } else {
            // .
          }
        });
    },
    loginType(type) {
      this.phoneTest = "";
      this.zcInfo = {};
      if (type.includes("sj")) {
        this.login = 1;
        this.txt = "管理员注册";
      }
      if (type == "wx") this.txt = "微信登录";
      this.sign = type;
      //填写授权回调域名
      // window.location.href =
      //   `https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_u` +
      //   `ri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect`
      // window.location.href =
      //   `https://open.weixin.qq.com/connect/qrconnect?appid=wx9947bbc32e2fda19&redirect_uri=http://xierongxian.vicp.net/v3/ucenter/wx/callback` +
      //   `&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect`
      // let search = window.location.href.split('?')[1].split('&')[0].split('=')[1]
      // 判断是否是微信登陆跳转
      // let url = decodeURIComponent(search)
      // let splitIndex = url.indexOf('?') // 返回第一个？号的位置
      // var str = url.substring(splitIndex + 1) // 获取到查询参数
      // var urlArr = str.split('&')
      // var obj = {}
      // for (var i = 0; i < urlArr.length; i++) {
      //   var arg = urlArr[i].split('=')
      //   obj[arg[0]] = arg[1]
      // }
      //
      // request({
      //   url:
      //     `https://open.weixin.qq.com/connect/qrconnect?appid=wx9947bbc32e2fda19&redirect_uri=http://xierongxian.vicp.net` +
      //     `&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect`,
      //   method: 'post',
      // }).then((res) =>
      // var obj = new WxLogin({
      //   self_redirect: false,
      //   id: 'login_container',
      //   appid: 'wx9947bbc32e2fda19',
      //   scope: 'snsapi_login',
      //   redirect_uri: 'http://xierongxian.vicp.net',
      //   state: 'A123DC35165464',
      //   style: 'black',
      //   href: 'data:text/css;base64,LmltcG93ZXJCb3ggLm5vcm1hbFBhbmVse21hcmdpbi10b3A6IDE1cHg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7Ym9yZGVyLWNvbG9yOiNDNUUxRkY7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQ==',
      // })
    },
    goBack() {
      this.login = 0;
      this.sign = "";
      this.txt = "管理员登录";
      this.phoneTest = "";
    },
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyEvent, true);
  },
};
</script>

<style lang="scss" scoped>
::v-deep .form {
  .el-form-item__content > .el-form-item__error {
    left: 80px !important;
  }
  .el-input--prefix {
    margin-bottom: 5px !important;
  }
}
.phoneTest {
  height: 23px;
  line-height: 23px;
  font-size: 11px;
  text-align: left;
  text-indent: 82px;
  color: red;
}
p {
  padding: 0;
  margin: 0;
}
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/login/login.png");
  background-size: 100% 100%;
  .title {
    color: #fff;
    height: 88px;
    padding: 0 135px;
    box-sizing: border-box;
    background: linear-gradient(
      to right,
      rgb(93, 209, 255),
      rgb(98, 161, 255),
      rgb(144, 157, 252)
    );
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      width: 760px;
      align-items: center;
    }
    .right {
      font-size: 16px;
      line-height: 88px;
      span:last-child {
        margin-left: 20px;
        padding-left: 20px;
        border-left: 2px solid #fff;
      }
      span:hover {
        cursor: pointer;
        color: red;
      }
    }
    img {
      width: 202px;
      height: 58px;
      margin-right: 60px;
    }
    .tit-text {
      width: 476px;
      height: 38px;
      font-size: 28px;

      // font-family: PangMenZhengDao-Cu-Regular, PangMenZhengDao-Cu;
      // font-weight: 400;
      // color: #ffffff;
      // line-height: 0px;
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
    }
  }
  .login-main {
    padding: 20px 8px 4px 8px;
    box-sizing: border-box;
    position: absolute;
    right: 16vw;
    width: 568px;
    margin-top: 8vh;
    border-radius: 2px;
    .bottom {
      padding-top: 30px;
      box-sizing: border-box;
      // height: 380px;
      height: 340px;
      // background: rgb(200, 244, 255);
      background: #fff;
      .login-btn {
        font-size: 20px;
        // font-weight: bold;
        width: 420px;
        height: 60px;
        border-radius: 30px;
        margin: 20px 0;
        background: rgb(1, 160, 255);
        color: #fff;
        border: none;
      }
      ::v-deep .el-input {
        width: 420px;
        height: 50px;
        line-height: 50px;
      }
      ::v-deep .el-input__inner {
        width: 420px;
        height: 50px;
        border-radius: 25px;
      }
      ::v-deep .el-input--prefix .el-input__inner {
        padding-left: 68px;
      }
      ::v-deep.el-input__prefix {
        left: 18px;
        width: 20px;
        font-size: 18px;
        &::after {
          display: block;
          content: "|";
          position: relative;
          left: 18px;
          top: -53px;
        }
      }
      .login_ {
        width: 568px;
        text-align: center;
        .title2 {
          line-height: 85px;
          color: rgb(71, 161, 255);
          font-size: 28px;
        }
        .tip {
          margin-bottom: 40px;
          display: flex;
          padding: 0 76px;
          box-sizing: border-box;
          justify-content: space-between;
          color: rgba(0, 0, 0, 0.6);
          .tip1,
          .tip2 {
            cursor: pointer;
          }
        }
        .tip1:hover {
          color: red;
          // text-decoration: underline red;
        }
        .tip2:hover {
          color: red;
          // text-decoration: underline red;
        }
        .thirdLogin {
          div {
            height: 40px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &:hover {
              span:last-child {
                color: red;
                text-decoration: underline red;
              }
            }
            span:last-child {
              margin-left: 5px;
              color: rgb(102, 102, 102);
            }
          }
          margin-top: 10px;
          display: flex;
          padding-left: 80px;
        }
      }
      .zc {
        .title2 {
          line-height: 85px;
          color: rgb(71, 161, 255);
          font-size: 28px;
        }
        width: 568px;
        text-align: center;
        .getCode {
          position: absolute;
          width: 130px;
          height: 50px;
          border-radius: 25px;
          right: 74px;
        }
        .djs {
          color: #fff;
          line-height: 50px;
          background: rgb(71, 161, 255);
        }
        p {
          margin-top: 18px;
          span {
            color: rgb(71, 161, 255);
            cursor: pointer;
          }
        }
      }
    }
  }
}
.tit {
  line-height: 100px;
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 30px;
  .back {
    position: absolute;
    left: 20px;
    top: 20%;
    cursor: pointer;
    color: rgb(71, 161, 255);
  }
}
.impowerBox {
  ::v-deep iframe {
    height: 300px;
  }
}
::v-deep .status {
  >>> p {
    margin: 0;
    padding: 0;
  }
}
:v-deep .el-form-item__error {
  position: absolute;
  top: -20px;
  color: yellow !important;
}
.inp1,
.inp2 {
  margin-bottom: 23px;
}
.inp1 {
  margin-bottom: 23px;
}
.jszc {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 12px;
  line-height: 30px;
  color: rgb(187, 187, 187);
}
.contactInformation {
  position: absolute;
  bottom: 20px;
}
</style>
